<template>
  <Form ref="dataForm" :model="dataForm" :rules="ruleValidate" :label-width="120">
    <FormItem label="类型">
      <RadioGroup v-model="dataForm.type">
        <Radio :label="0" :disabled="disableType">
          <span>目录</span>
        </Radio>
        <Radio :label="1" :disabled="disableType">
          <span>菜单</span>
        </Radio>
        <Radio :label="2" :disabled="disableType">
          <span>按钮</span>
        </Radio>
      </RadioGroup>
    </FormItem>
    <FormItem :label="nameLabel + '名称'" prop="name">
      <Input v-model="dataForm.name" :maxlength="45" placeholder="请输入菜单名称" :disabled="disableInput"></Input>
    </FormItem>
    <FormItem label="上级菜单编号" prop="parentId">
      <Input v-model="dataForm.parentId" placeholder="请选择上级菜单" :disabled="disableInput" :readonly="true"></Input>
    </FormItem>
    <FormItem label="上级菜单" prop="parentName">
      <Poptip v-model="poptipVisible" title="菜单列表" placement="bottom" @on-popper-show="handlePopperShow">
        <Input v-model="dataForm.parentName" placeholder="修改上级菜单" :disabled="disableInput" clearable></Input>
        <div slot="content">
          <menu-tree v-if="!disableInput"
                     :menuList="menuList"
                     @menuIdChanged="handleMenuIdChanged">
          </menu-tree>
        </div>
      </Poptip>
    </FormItem>
    <FormItem v-if="dataForm.type === 1" prop="url" label="菜单Url">
      <Input v-model="dataForm.url" placeholder="请输入菜单url" :disabled="disableInput"></Input>
    </FormItem>
    <FormItem v-if="dataForm.type !== 0" prop="perms" label="授权标识">
      <Input v-model="dataForm.perms" placeholder="多个用逗号分隔，如：user:list,user:create" :disabled="disableInput"
             clearable></Input>
    </FormItem>
    <FormItem v-if="dataForm.type !== 2" prop="orderNum" label="序号">
      <InputNumber :precision="0" :max="100" :min="1" v-model="dataForm.orderNum"
                   :disabled="disableInput"></InputNumber>
    </FormItem>
    <FormItem v-if="dataForm.type !== 2" prop="icon" label="菜单图标">
      <Alert type="warning" show-icon>TODO: icon列表需要使用雪碧图</Alert>
    </FormItem>
    <div v-if="showButton" style="overflow: hidden">
      <div style="float: right;">
        <Button type="text" style="width: 100px;" @click="handleCancel">取消</Button>
        <Button type="primary" style="width: 100px;" :loading="showLoading" :disabled="submitButtonDisabled"
                @click="handleSubmit">保存
        </Button>
      </div>
    </div>
  </Form>
</template>

<script>
import menuTree from './components/menu-tree.vue';

export default {
  name: 'menuAddOrUpdate',
  props: {
    menuList: Array
  },
  components: {
    menuTree
  },
  data () {
    return {
      dataForm: {
        menuId: '',
        name: '',
        parentId: 0,
        parentName: '',
        icon: '',
        type: 1,
        orderNum: 0,
        url: '',
        perms: ''
      },
      ruleValidate: {
        name: [
          {required: true, message: '菜单名称不能为空', trigger: 'blur'}
        ]
      },
      radioMap: [
        {label: 0, value: '目录'},
        {label: 1, value: '菜单'},
        {label: 2, value: '按钮'}
      ],
      // 保存/取消按钮显示状态
      showButton: false,
      // 保存按钮禁用状态
      submitButtonDisabled: false,
      // 表单控件可编辑状态
      disableInput: true,
      disableType: true,
      poptipVisible: false,
      showLoading: false
    }
  },
  computed: {
    nameLabel () {
      /* */
      return this.radioMap.find((item) => {
        return item.label === this.dataForm.type;
      }).value;
    }
  },
  methods: {
    init (treeNode) {
      /* add or update */
      this.$refs['dataForm'].resetFields();
      // this.disableInput = false;
      this.dataForm.menuId = treeNode.menuId;
      this.dataForm.name = treeNode.title || treeNode.name;
      this.dataForm.type = treeNode.type;
      this.dataForm.parentId = treeNode.parentId;
      this.dataForm.url = treeNode.url;
      this.dataForm.perms = treeNode.perms;
      this.dataForm.orderNum = treeNode.orderNum;
    },
    resetForm () {
      this.$refs['dataForm'].resetFields();
    },
    handleDisableType (isDisable) {
      this.disableType = isDisable;
    },
    showFormItem (isShow) {
      this.disableInput = !isShow;
      this.showButton = isShow;
    },
    handleCancel () {
      /* 取消 */
      this.showFormItem(false);
    },
    handleMenuIdChanged (menuNode) {
      /* 下拉菜单树点击事件 */
      // todo：bug：菜单-》目录，目录-》菜单暂时不允许，后台重新设计后修改此bug
      // 关闭弹窗
      this.poptipVisible = false;
      // 设置选中值
      this.dataForm.parentId = menuNode.menuId;
      this.dataForm.parentName = menuNode.title;
    },
    handlePopperShow () {
      /* 菜单树中自己不可选中 */
      // console.log(this.menuList)
    },
    handleSubmit () {
      /* 保存 */
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.showLoading = true;
          this.disableInput = !this.disableInput;
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/${this.dataForm.menuId ? 'update' : 'save'}`),
            method: 'post',
            data: this.$http.adornData({
              'menuId': this.dataForm.menuId || undefined,
              'type': this.dataForm.type,
              'name': this.dataForm.name,
              'parentId': this.dataForm.parentId,
              'url': this.dataForm.url,
              'perms': this.dataForm.perms,
              'orderNum': this.dataForm.orderNum,
              'icon': this.dataForm.icon
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$Message.success({
                content: '操作成功',
                duration: 2,
                onClose: () => {
                  this.handleCancel();
                  // 调用父组件刷新菜单树
                  this.$emit('refreshDataList');
                  this.showLoading = false;
                  this.handleDisableType(true);
                  // 调用父组件刷新资源列表
                  if (this.dataForm.type === 2) { // 按钮
                    this.$emit('resourceUpdate', {
                      menuId: this.dataForm.parentId,
                      title: this.dataForm.name
                    });
                  }
                }
              });
            } else {
              this.$Message.error(data.msg);
              this.showLoading = false;
              this.showFormItem(true);
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
